<template>
  <div id="app">
    <img src="./assets/logo.png">
  <div>
      {{totalPrice}}

      <apple></apple>
      <banana></banana>
      <!--<router-view></router-view>-->

      <!--<router-view name="viewA"></router-view>-->
      <!--<router-view name="viewB"></router-view>-->

      <!--<router-link :to="{path:'apple'}">to apple</router-link>-->
      <!--<router-link :to="{path:'banana'}">to banana</router-link>-->
  </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Apple from './components/Apple.vue'
import Banana from './components/Banana.vue'
export default {
  name: 'app',
  components: {
    HelloWorld,Apple,Banana
  },
  computed:{
    totalPrice(){
      return this.$store.state.totalPrice
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
